<style lang="scss" src="./index.scss" scoped></style>
<template>
    <page-box class="table">
        <ask-empty-text style="min-height: 400px;" v-if="tableData.length === 0"></ask-empty-text>
        <el-table
            v-show="tableData.length !== 0"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            :data="tableData"
            style="width: 100%">
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60">
            </el-table-column>
            <el-table-column
                v-for="(item,key) in tableColumn"
                :key="key"
                :prop="item.prop"
                :label="item.label"
                :width="item.width||''"
                align="center"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                    {{scope.row[item.prop]||'-'}}
                </template>
            </el-table-column>
        </el-table>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins, PropSync } from "vue-property-decorator";
import FormMixin from "@/mixins/form.mixin.base.ts";

// const mock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

@Component
export default class PeopleTable extends Mixins(FormMixin) {
    @PropSync(
        "currentPages",
        {
            type: Number,
            default: 1
        })
    private currentPage!: any;

    @PropSync(
        "pageSizes",
        {
            type: Number,
            default: 10
        })
    private pageSize!: any;

    @PropSync(
        "pageCounts",
        {
            type: Number,
            default: 10
        })
    private pageCount!: any;

    tableData: any[] = [];
    // 表格渲染格
    tableColumn: any[] = [
        { label: '成员名称', prop: 'name', width: "300" },
        { label: '部门名称', prop: 'department', width: "300" },
        { label: '成员账号', prop: 'account' }
    ];

    roleId = "";

    async init(id: any) {
        this.roleId = id;
        this.initData();
    }

    async initData(page = 1) {
        try {
            const response = await this.$server["systemManage/roleManage/authMember"]({
                data: {
                    roleId: this.roleId,
                    currentPage: page,
                    pageSize: this.pageSize
                }
            });
            if (this.responseHasError(response)) {
                return;
            }
            const data = response.data.data || {};
            this.tableData = this.buildTableData(data.records || []);
            this.pageCount = Number(data.total || 0);
            this.currentPage = Number(page);
            this.$emit("init", {
                pageCount: Number(data.total || 0)
            });
        } catch (error) {
            if (!error.cancel) {
                this.$message.error(error.message || "接口请求错误!");
                throw error;
            }
        }
    }

    buildTableData(list: any) {
        let res: any = [];
        if (list.length === 0) {
            return res;
        }
        res = list.map((cur: any) => {
            return {
                id: cur.id || "",
                name: cur.name || "",
                department: cur.departmentName || "",
                account: cur.username || "",
                source: cur
            };
        });
        return res;
    }
}
</script>
